<template>
    <div class="dhzn_gooodsdetails">
        <div class="dhzn_gd-title bcwh">
            <span><i class="el-icon-arrow-left f24 b00a"></i></span>
            <h2>商品详情</h2>
            <span>{{this.$route.query.id}}</span>
            <span>{{this.$route.params.id}}</span>
            <span>{{this.$route.params.id}}</span>
        </div>
        <div class="dhzn_gd-content bcwh">
            <div class="dhzn_gd-c-navigation">
                <ul>
                    <li @click="pageingstate = 0" :class="pageingstate === 0 ? 'dhzn_gd-c-n-li' : ''"><router-link to="/goodsdetails/gdmaterial">资料</router-link></li>
                    <li @click="pageingstate = 1" :class="pageingstate === 1 ? 'dhzn_gd-c-n-li' : ''"><router-link to="/goodsdetails/gdcoupon">优惠券</router-link></li>
                    <li @click="pageingstate = 2" :class="pageingstate === 2 ? 'dhzn_gd-c-n-li' : ''"><router-link to="/goodsdetails/gdsize">规格</router-link></li>
                    <li @click="pageingstate = 3" :class="pageingstate === 3 ? 'dhzn_gd-c-n-li' : ''"><router-link to="/goodsdetails/gdestimate">评价</router-link></li>
                </ul>
                <router-view></router-view>
            </div>
        </div>
        <!-- <div>
            <div class="dhzn_g-title pl20">
                <span>添加</span>
                <button type="button" @click="showreset" class="bc4a p10 br5 ml10 wh">轮播图/活动/优惠券+</button>
            </div> -->

            <!-- 轮播图 -->
            <!-- <div class="d_gd-image mt20">
                <h1 class="p10 bb1 b00a">轮播图</h1>

                <el-carousel :interval="4000" type="card" height="280px" :autoplay="false" class="mt20">
                    <el-carousel-item v-for="(item,key) in goodsimage" :key="key" @click="updataimage">
                        <div class="medium">
                            <img :src="item.imageurl" alt="">
                            <div class="medium-brother">
                                <button type="button" class="b00a" @click="updataimage(item,key)"><i class="iconfont icon-xiugai"></i>修改</button>
                                <button type="button" class="ff53" @click="deleteimage(item.id,key)"><i class="medium-i iconfont icon-shanchu"></i>删除</button>
                            </div>
                        </div> 
                    </el-carousel-item>
                </el-carousel>

                <div class="d_g-lblock mt20">
                    <el-pagination
                        @size-change="handleSizeChange(0)"
                        @current-change="handleCurrentChange($event,0)"
                        :current-page="currentPage[0]"
                        :page-size="pagesize[0]"
                        layout="total, prev, pager, next, jumper"
                        :total="total[0]">
                    </el-pagination>
                </div>

            </div> -->

            <!-- 活动 -->
            <!-- <div class="d_gd-activity mt20">
                <h1 class="p10 bb1 b00a"><span v-if="goodsactivity.length===0">暂无活动</span><span v-else>商品参加的活动</span></h1>
                <div class="d_gd-a-content" v-for="(item,key) in goodsactivity" :key="key">

                    <div>
                        <span class="b00a f18">{{item.goodsid | goodsarrfilter}} </span> 进入{{item.type | activitytype}}活动:
                        全场消费满<span class="ff53">{{item.full}}</span>元<span v-if="item.type===0">，减<span class="ff53">{{item.reduce}}</span>元。</span><span v-else>全国包邮。</span>
                    </div>

                    <div>
                        <button type="button" class="bc4a br5 wh p5" @click="updataactivity(item,key)"><i class="iconfont icon-xiugai"></i>修改</button>
                        <button type="button" class="bcf6 br5 wh p5" @click="deleteactivity(item.id,key)"><i class="medium-i iconfont icon-shanchu"></i>删除</button>
                    </div>

                </div>

                <div class="d_g-lblock mt20">
                    <el-pagination
                        @size-change="handleSizeChange(1)"
                        @current-change="handleCurrentChange($event,1)"
                        :current-page="currentPage[1]"
                        :page-size="pagesize[1]"
                        layout="total, prev, pager, next, jumper"
                        :total="total[1]">
                    </el-pagination>
                </div>

            </div> -->

            <!-- 优惠券 -->
            <!-- <div class="d_gd-coupon mt20">

                <h1 class="p10 bb1 b00a">该商品的优惠券</h1>
                <div class="d_gd-c-content">

                    <div class="d_gd-c-c-details" v-for="(item,key) in goodscoupon" :key="key">
                        <div class="d_gd-ccd-white">
                            <div class="d_gd-ccdw-layout f12">
                                <p class="f16 b">{{item.type | changetype}}</p>
                                <p v-if="Number(item.type) === 0">满<span class="f14 ff53">{{item.full}} </span> 减<span class="f14 ff53">{{item.reduce}}</span></p>
                                <p v-if="Number(item.type) === 1">领取后全场商品享受<span class="f14 ff53">{{item.discount}}</span></p>
                                <p v-if="Number(item.type) === 2">订单结算后，<span class="f14 ff53">{{item.rebate}}</span>元现金退还至账户</p>
                            </div>
                            
                            <div class="d_gd-ccdw-layout">
                                <p class="f14">总:<span class="f16 ff53">{{item.number}}</span></p>
                                <p class="f14">剩:<span class="f16 ff53">{{item.surplus}}</span></p>
                            </div>

                        </div>
                        <div class="d_gd-ccd-red">
                            <button type="button" class="bcf6 br5 wh" @click="updatacoupon(item,key)">修改</button>
                            <button type="button" class="bcf6 br5 wh" @click="deletecoupon(item.id,key)">删除</button>
                        </div>
                    </div>

                </div>

                <div class="d_g-lblock mt20">
                    <el-pagination
                        @size-change="handleSizeChange(2)"
                        @current-change="handleCurrentChange($event,2)"
                        :current-page="currentPage[2]"
                        :page-size="pagesize[2]"
                        layout="total, prev, pager, next, jumper"
                        :total="total[2]"
                        :small="true">
                    </el-pagination>
                </div>

            </div>
        </div> -->

        <!-- 添加商品 -->
        <!-- <div class="dhzn_gd-add">
            <div class="bb1 f12 p10 b00a"><button type="button" class="br5 wh bc4a p5" @click="showstate = 0;for(var i in disabled) disabled[i] = false">返回列表</button> *对应的添加项后面的选框是默认选中的，表示添加相应的设置想，不需要提交取消勾选即可</div>
            <div class="dhzn_gd-a-updata" v-if="showstate === 1 || showstate === 2">
                <div class="dhzn_gd-a-u-left">
                    <span v-if="showstate === 1">添加</span><span v-else>修改</span>轮播图<el-checkbox class='ml10' v-model="disabled.image"></el-checkbox>
                    <p v-if="showstate === 2" class="f12 tl pl5 pr5 ff53">清除原数据后上传新数据更新即可</p>
                </div>

                <div class="dhzn_gd-a-u-rigth pt10">

                    <el-form label-width="100px" :disabled="!disabled.image">
                        <el-form-item label="商品轮播图" v-for="(item,key) in ruleForm.image" :key="key" prop="region"> -->
                            <!-- <el-upload
                                class="upload-image"
                                drag
                                multiple
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :on-change="changeFile"
                                :file-list="fileList"
                                list-type="picture"
                                :auto-upload="false"
                                :limit="1"
                                :disabled="!disabled.image">
                                <i class="iconfont icon-tubiaolunkuo- f35"></i>
                                <div class="el-upload__text">拖动<em>点击上传</em></div>
                            </el-upload> -->
                            <!-- <el-col :span="18"><el-input v-model="item.url" clearable></el-input></el-col>
                            <el-col :span="3"><div class="dhzn_gd-aur-preview">
                                <el-popover popper-class="d_gd-aur-popover" placement="bottom" trigger="hover" v-model="visible">
                                    <img :src="item.url" alt="">
                                    <img :src="item.url" alt="" slot="reference">
                                </el-popover>
                            </div></el-col>
                            <el-col :span='3' v-if="key === 0 && disabled.image && showstate === 1" class="tr pr20"><i @click="additoon" class="iconfont icon-addition1 f30"></i></el-col>
                        </el-form-item>
                    </el-form>
                    
                </div>
            </div>

            <div class="dhzn_gd-a-updata" v-if="showstate === 1 || showstate === 3">
                <div class="dhzn_gd-a-u-left"><span v-if="showstate === 1">添加</span><span v-else>修改</span>优惠券<el-checkbox class='ml10' v-model="disabled.coupon"></el-checkbox></div>
                <div class="dhzn_gd-a-u-rigth pt10">
                    
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="!disabled.coupon">
                        <el-form-item label="优惠券类型" prop="type">
                            <el-select v-model="ruleForm.type" @change="detchange('ruleForm')" placeholder="请选择添加的优惠券类型" clearable>
                                <el-option label="满减券" value="0"></el-option>
                                <el-option label="折扣券" value="1"></el-option>
                                <el-option label="返现券" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="使用条件" prop="full" v-if="ruleForm.type == 0">
                            <el-col :span="6"><el-input v-model="ruleForm.full" placeholder="设置使用条件" clearable></el-input></el-col>
                            <el-col :span="1" class="tc">-</el-col>
                            <el-col :span="6"><el-input v-model="ruleForm.reduce" placeholder="设置减免金额" clearable></el-input></el-col>
                        </el-form-item>

                        <el-form-item label="使用条件" prop="discount" v-else-if="ruleForm.type == 1">
                            <el-col :span="6"><el-input v-model="ruleForm.discount" placeholder="设置折扣力度" clearable></el-input></el-col>
                        </el-form-item>

                        <el-form-item label="使用条件" prop="rebate" v-else>
                            <el-col :span="6"><el-input v-model="ruleForm.rebate" placeholder="设置返现金额" clearable></el-input></el-col>
                        </el-form-item>

                        <el-form-item label="发放总数" prop="number"> 
                            <el-col :span="6"><el-input v-model="ruleForm.number" placeholder="设置优惠券总张数" clearable></el-input></el-col>
                        </el-form-item>

                        <el-form-item label="优惠券剩余" prop="surplus"> 
                            <el-col :span="6"><el-input v-model="ruleForm.surplus" placeholder="设置优惠券总张数" clearable></el-input></el-col>
                        </el-form-item>
                    </el-form>

                </div>
            </div>

            <div class="dhzn_gd-a-updata" v-if="showstate === 1 || showstate === 4">
                <div class="dhzn_gd-a-u-left ws1"><span v-if="showstate === 1">添 加</span><span v-else>修 改</span> 活 动<el-checkbox class='ml10' v-model="disabled.activity"></el-checkbox></div>
                <div class="dhzn_gd-a-u-rigth pt10">

                    <el-form :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :disabled="!disabled.activity">
                        <el-form-item label="活动类型" prop="actype">
                            <el-select v-model="ruleForm.actype" @change="activitychange" placeholder="选择活动类型" clearable>
                                <el-option label="满减活动" value="0"></el-option>
                                <el-option label="包邮活动" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="使用条件" prop="acfull">
                            <el-col :span="6"><el-input v-model="ruleForm.acfull" placeholder="设置使用条件" clearable></el-input></el-col>
                            <el-col :span="1" class="tc" v-if="ruleForm.actype == 0">-</el-col>
                            <el-col :span="6" v-if="ruleForm.actype == 0"><el-input v-model="ruleForm.acreduce" placeholder="设置减免金额" clearable></el-input></el-col>
                        </el-form-item>
                    </el-form>

                </div>
            </div>
                
            <button class="bc4a p10 br5 m10 wh" type="button" v-if="showstate <= 1" @click="submitdata">添加</button>
            <button class="bc4a p10 br5 m10 wh" type="button" v-else @click="upgoods">更新</button>
        </div> -->

    </div>
</template>

<script>
const axios = require('axios')
import { uploadImgToBase64 } from '../js/time.js'
let that
export default {
    components: {},
    data() {
        return {
            token: '',                      //登录验证
            pageingstate: 0,
            goodsid: '',                    //接口传过来的商品id
            showstate: 0,                   //用户显示不同的内容暂时（数据和添加数据）
            // 所有的产品名和对应的id
            goodsdata: [],
            // 产品轮播图
            goodsimage: [],
            // 产品优惠券
            goodscoupon: [],
            // 产品活动
            goodsactivity: [],
            currentPage: [1,1,1],						//分页的默认页数
            pagesize: [10,10,10],                       //单页条数
            total: [0,0,0],						   //总条数
            // 上传图片
            dialogImageUrl: '',
            // 上传图片的预览效果
            visible: false,
            dialogVisible: false,
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            disabled:{
                image: false,
                coupon: false,
                activity: false,
            },
            // 优惠券的提交的表单
            ruleForm: {
                image: [{url:''}],
                type: '0',
                full: '',
                reduce: '',
                discount: '',
                rebate: '',
                number: '',
                surplus: '',

                actype: '0',
                acfull: '',
                acreduce: '',
            },
            rules: {
                type: [
                    { required: true, message: '请选择优惠券类型', trigger: 'change' }
                ],
                full: [
                    { required: true, message: '满减券的使用条件和减免金额都不能为空', trigger: 'change' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                discount: [
                    { required: true, required: true, message: '请设置折扣券比例', trigger: 'change' }
                ],
                rebate: [
                    { required: true, required: true, message: '请设置返现券金额', trigger: 'change' }
                ],
                number: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                surplus: [
                    {required: true, message: '请设置剩余优惠券数', trigger: 'change'}
                ],

                actype: [
                    { required: true, message: '请选择商品参加的活动', trigger: 'change' }
                ],
                acfull: [
                    { required: true, message: '请输入该商品满减的条件以及减免额度', trigger: 'change' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    filters: {
        changetype(type){
            if(type == 0){
                type = '满减券'
            }else if(type == 1){
                type = "折扣券"
            }else{
                type = "返现券"
            }
            return type
        },
        activitytype(type){
            if(type === 0){
                type = "满减"
            }else{
                type = '包邮'
            }
            return type
        },
        goodsarrfilter(goodsid){
            // console.log(that.goodsdata)
            that.goodsdata.filter((item) =>{ 
                if(item.id === goodsid){
                    goodsid =  item.name
                }
            })
            return goodsid
        }        
    },
    computed: {},
    watch: {},
    methods: {
        // 用作输入框属性清除添加和修改在同一个页面进行导致之前的值残留
        showreset(){
            that.showstate = 1;
            for(var i in that.ruleForm)
            if(that.ruleForm[i] != 0){ that.ruleForm[i] = ''}
            that.ruleForm.image = [{url:''}];
            that.ruleForm.type = '0';
            that.ruleForm.actype = '0';
        },

        // 活动选框改变时清除相应的设置
        activitychange(){
            that.ruleForm.acfull = '';
            that.ruleForm.acreduce = '';
        },

        // 优惠券的不同状态的表单校验清除
        detchange(formName){
            let that = this;
            that.ruleForm.full = '';
            that.ruleForm.discount = '';
            that.ruleForm.rebate = '';
            this.$refs[formName].clearValidate(['full']);
            this.$refs[formName].clearValidate(['discount']);
            this.$refs[formName].clearValidate(['rebate']);
        },

        // 请求轮播图
        requestimage(){
            let that = this;
            let data = {current:that.currentPage[0],size:that.pagesize[0],goodsid: that.goodsid};
            let updata = JSON.stringify(data);
            // console.log(updata)
            axios({
                method: 'post',
                url: '/api/goodsBanner/list',
                headers: {
                    'Content-type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.goodsimage = resp.data.data;
                that.total[0] = resp.data.code;
                if(that.goodsimage === undefined){
                    sessionStorage.removeItem("token")
                    location.reload()
                }else{return}
            })
            .catch( err=> {console.log(err)})
        },

        // 请求活动
        requestactivity(){
            let that = this;
            let data = {current:that.currentPage[1],size:that.pagesize[1],goodsid:that.goodsid};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goodsActivity/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.goodsactivity = resp.data.data;
                that.total[1] = resp.data.code;
            })
            .catch( err=> {console.log(err)})
        },

        // 请求优惠券
        requestcoupon(){
            let that = this;
            let data = {current:that.currentPage[2],size:that.pagesize[2],goodsid:that.goodsid};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goodsCoupon/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.goodscoupon = resp.data.data
                that.total[2] = resp.data.code;
            })
            .catch( err=> {console.log(err)})
        },

        // 添加和修改的提交
        submitdata(){
            // console.log(this.imageUrl)
            // console.log(that.fileList)
            that.addupimage()
            that.addupcoupon()
            that.addupactivity()
        },

        // 添加轮播图
        addupimage(){
            if(that.disabled.image === true){
                let data = {goodsid: that.goodsid},updata;
                for(var i=0;i<that.ruleForm.image.length;i++){
                    data.imageurl = that.ruleForm.image[i].url;
                    updata = JSON.stringify(data)
                    // console.log(updata)
                    axios({
                        method: 'post',
                        url: '/api/goodsBanner/add',
                        headers: {
                            'Content-Type': 'application/json',
                            'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                        },
                        data: updata
                    })
                    .then( resp=> {
                        console.log(resp)
                        // that.goodsimage.push(data)
                        // that.total[0] += 1;
                        if(resp.data.code === 200){ 
                            that.goodsimage.length<10 ? that.goodsimage.push(data) : ""
                            that.total[0] += 1;
                        }else{return}
                    })
                    .catch( err=> {console.log(err)})
                }
                
            }else{return}
        },

        // 添加优惠券
        addupcoupon(){
            if(that.disabled.coupon === true){
                let data = {
                    goodsid: that.goodsid,
                    type: String(that.ruleForm.type),
                    full: that.ruleForm.full,
                    reduce: that.ruleForm.reduce,
                    discount: that.ruleForm.discount,
                    rebate: that.ruleForm.rebate,
                    number: that.ruleForm.number,
                    surplus: that.ruleForm.surplus
                }
                for(var i in data)
                if(data[i] === ''){
                    delete data[i]
                }
                let updata = JSON.stringify(data)
                console.log(updata)
                axios({
                    method: 'post',
                    url: '/api/goodsCoupon/add',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                })
                .then( resp=> {
                    // console.log(resp)
                    if(resp.data.code === 200){ 
                        that.goodscoupon.length<10 ? that.goodscoupon.push(data) : ""
                        that.total[2] += 1;
                    }else{return}
                })
                .catch( err=> {console.log(err)})
            }else{return}
        },

        // 添加活动
        addupactivity(){
            if(that.disabled.activity === true){
                let data = {
                    goodsid: Number(that.goodsid),
                    type: Number(that.ruleForm.actype),
                    full: that.ruleForm.acfull,
                    reduce: that.ruleForm.acreduce
                }
                console.log(data)
                for(var i in data)
                if(data[i] === ""){
                    delete data[i]
                }
                let updata = JSON.stringify(data)
                // console.log(updata)
                axios({
                    method: 'post',
                    url: '/api/goodsActivity/add',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization':   `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                })
                .then( resp=> {
                    // console.log(resp)
                    if(resp.data.code === 200){ 
                        that.goodsactivity.length<10 ? that.goodsactivity.push(data) : ""
                        that.total[1] += 1;
                    }else{return}
                })
                .catch( err=> {console.log(err)})
            }else{return}
        },

        // 删除轮播图
        deleteimage(id,key){
            // console.log(id)
            let data = {id: id}
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goodsBanner/delete',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then( resp=> {
                console.log(resp)
                if(resp.data.code === 200){
                    that.goodsimage.splice(key,1)
                    that.total[0] -=1;
                }else{return}
            })
            .catch( err=> {console.log(err)})
        },

        // 删除优惠券
        deletecoupon(id,key){
            // console.log(id)
            let data = {id: id};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goodsCoupon/delete',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then(resp=>{
                // console.log(resp)
                if(resp.data.code === 200){
                    that.goodscoupon.splice(key,1)
                    that.total[2] -=1;
                }else{return}
            })
            .catch(err=>{console.log(err)})
        },

        // 删除活动
        deleteactivity(id,key){
            // console.log("删除的",id)
            let data = {id: id};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/goodsActivity/delete',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                if(resp.data.code === 200){
                    that.goodsactivity.splice(key,1)
                    that.total[1] -=1;
                }else{return}
            })
            .catch( err=>{console.log(err)})
        },

        // 修改更新
        upgoods(){
            // console.log('修改')
            if(that.showstate == 2){
                that.updataimage()
            }else if(that.showstate == 3){
                that.updatacoupon()
            }else{
                that.updataactivity()
            }
            that.showstate = 0;
        },

        // 修改轮播图
        updataimage(item,key){
            console.log(item,key)
            // that.showstate = 2
            if(that.disabled.image){

                let data = {goodsid: that.goodsid, id: that.ruleForm.id, imageurl: that.ruleForm.image[0].url};
                let updata = JSON.stringify(data)
                // console.log(updata)
                axios({
                    method: 'post',
                    url: '/api/goodsBanner/update',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                })
                .then( resp=> {
                    console.log(resp)
                    // that.goodsimage.push(data)
                    // that.total[0] += 1;
                    if(resp.data.code === 200){ 
                        that.goodsimage.splice(that.ruleForm.key,1,data)
                        that.disabled.image = false;
                    }else{return}
                })
                .catch( err=> {console.log(err)})
                

            }else{
                that.showstate = 2
                that.disabled.image = true;
                that.ruleForm.image[0].url = item.imageurl;
                that.ruleForm.id = item.id;
                that.ruleForm.key = key;
            }
        },

        //修改优惠券
        updatacoupon(item,key){
            // console.log(item,key)
            // that.showstate = 3
            if(that.disabled.coupon){
                console.log(that.disabled.activated)
                let data = {
                    goodsid: that.goodsid,
                    id: that.ruleForm.id,
                    type: String(that.ruleForm.type),
                    full: that.ruleForm.full,
                    reduce: that.ruleForm.reduce,
                    discount: that.ruleForm.discount,
                    rebate: that.ruleForm.rebate,
                    number: that.ruleForm.number,
                    surplus: that.ruleForm.surplus
                }
                for(var i in data)
                if(data[i] === ''){
                    delete data[i]
                }
                let updata = JSON.stringify(data)
                console.log(updata)
                axios({
                    method: 'post',
                    url: '/api/goodsCoupon/update',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                })
                .then( resp=> {
                    console.log(resp)
                    if(resp.data.code === 200){ 
                        that.goodscoupon.splice(that.ruleForm.key,1,data)
                        that.disabled.coupon = false;
                    }else{return}
                })
                .catch( err=> {console.log(err)})

            }else{
                console.log(that.disabled.coupon)
                that.showstate = 3
                that.disabled.coupon = true;
                that.ruleForm.type = String(item.type);
                that.ruleForm.full = item.full;
                that.ruleForm.reduce = item.reduce;
                that.ruleForm.discount = item.discount;
                that.ruleForm.rebate = item.rebate;
                that.ruleForm.number = item.number;
                that.ruleForm.surplus = item.surplus;
                that.ruleForm.id = item.id;
                that.ruleForm.key = key;
            }
        },

        // 修改活动
        updataactivity(item,key){
            // console.log(item,key)
            // let that = this;
            if(that.disabled.activity){
                let data = {
                    goodsid: Number(that.goodsid),
                    id: that.ruleForm.id,
                    type: Number(that.ruleForm.actype),
                    full: that.ruleForm.acfull,
                    reduce: that.ruleForm.acreduce
                }
                console.log(data)
                for(var i in data)
                if(data[i] === ""){
                    delete data[i]
                }
                let updata = JSON.stringify(data)
                // console.log(updata)
                axios({
                    method: 'post',
                    url: '/api/goodsActivity/update',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization':   `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                })
                .then( resp=> {
                    console.log(resp)
                    if(resp.data.code === 200){ 
                        that.goodsactivity.splice(that.ruleForm.key,1,data)
                        that.disabled.activity = false;
                    }else{return}
                })
                .catch( err=> {console.log(err)})
            }else{
                that.showstate = 4
                that.disabled.activity = true;
                that.ruleForm.actype = String(item.type);
                that.ruleForm.acfull = item.full;
                that.ruleForm.acreduce = item.reduce
                that.ruleForm.id = item.id;
                that.ruleForm.key = key;
            }
        },

        // 单页数据条数
        handleSizeChange(val) {
            console.log(`每页: ${val}条数据`);
            this.pagesize = val;
            // this.goodslist()
            // if(that.paging === 1){
            //     that.classifylatt()
            // }else if(that.paging === 2){
            //     that.lookson()
            // }else if(that.paging === 3){
            //     that.inquire()
            // }else{
            //     that.updataclassify()
            // }
        },

        //分页的跳页函数
        handleCurrentChange(val,number) {
            console.log(`当前页: ${val}`,`区分分页: ${number}`);
            const that = this;
            // that.currentPage = val;
            if(number === 0){
                that.currentPage[0] = val;
                that.requestimage()
            }else if(number === 1){
                that.currentPage[1] = val;
                that.requestactivity()
            }else if(number === 2){
                that.currentPage[2] = val;
                that.requestcoupon()
            }else{return}
        },

        // 添加图片上传框
        additoon(){
            if(that.ruleForm.image.length < 6){
                that.ruleForm.image.push({url:''})
            }else{
                this.$message.error("轮播图一次最多只能添加六张")
            }
        },

        //拿token
        newtoken(){
            let that = this;
            let axios = require('axios')
			let loguser = JSON.parse(sessionStorage.getItem('updata'))
			let data = {username:loguser.username, password:loguser.password};
			let updata = JSON.stringify(data);
			console.log(updata)
			axios({
				method: 'post',
				url: '/api/getAuthority/manager',
				headers: { 'Content-Type': 'application/json' },
				data: updata
			})
			.then( resp=> {
                that.token = resp.data.data;
				sessionStorage.setItem("token", JSON.stringify(resp.data.data))    
                that.requestimage()
                that.requestcoupon()
                that.requestactivity()
			}).catch( err=> {})
        }
    },
    created() {},
    mounted() {
        let that = this;
        that.goodsid = this.$route.params.goodsid; 
        that.goodsdata = (JSON.parse(sessionStorage.getItem("goodsdata")))
        that.newtoken()
    },
    beforeCreate() {
        that = this;
    },
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dhzn_gooodsdetails{
    height: calc(100% - 56px);
    box-sizing: border-box;
}
/* 新布局的头部 */
.dhzn_gd-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    font-size: 20px;
}
.dhzn_gd-content{
    height: calc(100% - 50px);
    padding: 10px;
}
/* 父页面的导航 */
.dhzn_gd-c-navigation ul{
    list-style:none;margin:0;
    font-size: 0;
    border-bottom:  #409EFF 1px solid;
}
.dhzn_gd-c-navigation ul li{
    display:inline-block;
    font-size: 18px;
    padding: 5px;
    border-radius: 5px 5px 0 0;
}
/* .dhzn_gd-c-navigation ul li:hover{
    background-color: #409EFF;
    color: white;
} */
.dhzn_gd-c-n-li a{
    background-color: #409EFF;
    color: white;
}


.dhzn_g-title{
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
}

/* 轮播图 */
.d_gd-image{
    background-color: #ffffff;
}.d_gd-i-content{
    display: flex;
}
.d_gd-i-content .el-carousel{
    width: 100%;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.medium, .medium img{
    position: relative;
    width: 100%;
    height: 100%;
}
.medium-brother{
    display: none;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background: #000000c7;
    color: #ff5e5e;
}
.medium:hover .medium-brother{
    display: flex;
}
.medium-brother button{
    font-size: 16px;
    margin: auto;
    padding: 5px;
    background: transparent;
}
.medium-brother button:hover{
    font-size: 18px;
    cursor: pointer;
    text-shadow: 0 0 1px #cecece;
}

/* 活动 */
.d_gd-activity{
    background-color: #ffffff;
}
.d_gd-a-content{
    display: flex;
    justify-content: space-between;
    /* vertical-align: text-bottom; */
    padding: 20px;
}

/* 优惠券 */
.d_gd-coupon{
        overflow: hidden;
        background-color: #ffffff;
    }
    .d_gd-c-content{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .d_gd-c-c-details{
    display: flex;
    position: relative;
    width: 31.33333%;
    margin: 1%;
    min-height: 80px;
    color: black;
    /*    重点代码    */
    background: radial-gradient(circle at right top, transparent 8px,  #ffffff 0) top left / 75% 50% no-repeat,
      radial-gradient(circle at right bottom, transparent 8px,  #ffffff 0) bottom left /75% 50% no-repeat,
      radial-gradient(circle at left top, transparent 8px, #fd6666 0) top right /25% 50% no-repeat,
      radial-gradient(circle at left bottom, transparent 8px, #fd6666 0) bottom right /25% 50% no-repeat;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,.3));
    box-shadow: -2px 0 0 #ff1717;
    /* box-sizing: border-box; */
    }
    .d_gd-c-c-details::before {
        content: '';
        height: 60px;
        border: 2px dashed #fd6666;
        position: absolute;
        left: 75.2%;
        top: 0;
        bottom: 0;
        margin: auto -2px;
        }

    .d_gd-c-c-details::after {
        content: '';
        position: absolute;
        height: 100%;
        width:2px;
        top: 0;
        right: -2px;
        background-image: linear-gradient(to bottom, #fd6666 2px, transparent 2px, transparent),
        radial-gradient(5px circle at 3px 3px, transparent 2px, #fd6666 3px);
        background-size: 50px 5px;
    }
    /* .d_gd-ccdw-layout p{
        white-space: nowrap;
        overflow: hidden;
    } */

    .dhzn_gd-add{
        background-color: #ffffff;
        border: 1px solid #cccccc;
    }
    .d_gd-ccd-white{
        display: flex;
        /* flex-direction: column;
        justify-content: space-between; */
        width: 75%;
        padding: 10px;
        box-sizing: border-box;
    }
    .d_gd-ccdw-layout{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .d_gd-ccdw-layout:nth-child(2){
        margin-left: auto;
    }
    /* 优惠券右边红色里面的区域 */
    .d_gd-ccd-red{
        text-align: center;
        width: 25%;
        margin: auto 0;
        color: #ffffff;
        box-sizing: border-box;
    }
    .d_gd-ccd-red button{
        width: 100%;
        padding: 5px 0;
    }
    .d_gd-ccd-red button:nth-child(1):hover{
        color: #37aefd;
    }
    .d_gd-ccd-red button:nth-child(2):hover{
        color: #000000;
    }


.el-upload--picture-card{
    width: 0;
    height: 0;
    line-height: 0;
    border: 0 dashed #c0ccda;
}
/* 上传图片 */
.dhzn_gd-a-updata{
    display: flex;
}
.dhzn_gd-a-u-left{
    text-align: center;
    /* margin-right: 10px; */
    padding-top: 10px;
    width: 120px;
    min-width: 120px;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
.dhzn_gd-a-u-rigth{
    width: 100%;
    border-bottom: 1px solid #cccccc;
}
.dhzn_gd-aur-preview{
    width: 50px;
    height: 50px;
    margin-left: 20px;
}
.dhzn_gd-aur-preview img{
    max-width: 100%;
    max-height: 100%;
}
.d_gd-aur-popover img{
    max-width: 700px;
    max-height: 700px;
}
/* .dhzn_gd-aur-preview:hover img{
    z-index: 10000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.8) translateZ(0);
    max-width: 100%;
    max-height: 100%;
} */

</style>

<style>
    /* .upload-image{
        display: flex;
    }
    .upload-image .el-upload-list{
        display: flex;
        flex-wrap: wrap;
    }
    .upload-image .el-upload--picture{
        text-align: center;
        min-width: 100px;
        height: 100px;
        margin-top: 10px;
    }
    .upload-image .el-upload--picture .el-upload-dragger{
        width: 100%;
        height: 100%;
    }
    .upload-image .el-upload-list--picture .el-upload-list__item{
        width: 100px;
        height: 100px;
        margin-top: 0;
        margin-left: 10px;
    } */
</style>